<template>
  <div class="message">
    <Layout>
      <!--固定，移动端的页面基本都是 顶天立地的 顶部 header 底部 tabbar-->
      <van-sticky :offset-top="0">
        <!--1. 搜索-->
        <div class="nav">
          <h3>消息</h3>
          <van-icon name="volume"
            color="#fff" />
        </div>
      </van-sticky>
      <div class="wrap">
        <div class="notice">
          <div class="left">
            <img src="../../assets/banner/company-logo.jpg"
              alt="">
          </div>
          <div class="middle">
            <h3>热招新岗位</h3>
            <p>19个公司发布了新岗位</p>
          </div>
          <van-icon name="arrow" />
        </div>
        <router-link custom
          to="/login"
          v-slot={href,navigate}>
          <div class="no-login"
            :href="href"
            @click="navigate"
            v-if="!isLogin">
            未登录,点击前往登陆
          </div>
        </router-link>
        <div class="message_list"
          v-if="state.conversationListData.length!=0">
          <div class="item"
            v-for="item in state.conversationListData"
            :key="item.conversationID"
            @click="goChat(item.conversationID)">
            <div class="left">
              <img :src='item.userProfile.avatar'
                alt="">
            </div>
            <div class="middle">
              <h3>
                <!-- {{conversationListData[0].userProfile.userID}} -->
                {{item.userProfile.nick}}

              </h3>
              <p>{{item.lastMessage.payload.text}}</p>
            </div>
            <div class="right">
              <span>{{$filters.formatTime(item.lastMessage.lastTime)}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 点击打开的聊天页面 -->
      <ChatCom @update:closeChat="closeChat"
        v-if="showChat"
        :cvId="state.conversationChatId"></ChatCom>
    </Layout>
  </div>
</template>
<script setup lang="ts">
  import Layout from '../Layout/index.vue'
  import ChatCom from './Chat.vue'
  import { reactive, onMounted, ref, Ref, toRaw, computed, getCurrentInstance } from 'vue'
  import { getBannerBoys, getWorkList, IBanner, IWork } from '@/api/work'
  import { get } from 'http'
  const { proxy } = getCurrentInstance()
  let state = reactive({
    conversationListData: [],
    conversationChatId: ''
  })
  let isLogin = ref(false)
  // 关闭聊天框
  let showChat = ref(false)
  let closeChat = () => {
    showChat.value = false
  }
  const goChat = cvId => {
    state.conversationChatId = cvId.slice(3)
    showChat.value = true
  }
  onMounted(() => {
    const token = localStorage.getItem('token')
    if (!token) return
    isLogin.value = true
    getConversationList()
    console.log(proxy.$filters, '12312321')

    // console.log('conversationListData=>', conversationListData)
  })
  // 获取到会话列表
  let getConversationList = () => {
    let promise = proxy.tim.getConversationList()
    promise
      .then(function (imResponse) {
        const conversationList = imResponse.data.conversationList // 全量的会话列表，用该列表覆盖原有的会话列表
        state.conversationListData = conversationList
        console.log('conversationListData=>', state.conversationListData)
      })
      .catch(function (imError) {
        console.warn('getConversationList error:', imError) // 获取会话列表失败的相关信息
      })
  }
</script>
<style lang="less" scoped>
@mainColor: #149639;
.message {
  // 顶部搜索
  .nav {
    background-color: #149639;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px;
    h3 {
      font-size: 20px;
      color: #fff;
      margin-right: 10px;
    }
  }
  .no-login {
    margin-top: 20px;
    color: #9d9d9d;
    font-size: 16px;
    text-align: center;
    width: 200px;
    margin: 20px auto;
    border-radius: 15px;
    padding: 10px;
    border: 1px solid #9d9d9d;
  }
  .wrap {
    padding: 0 15px;
    .notice {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      border-radius: 10px;
      box-shadow: 0 0 10px -2px #ccc;
      width: 349px;
      .left {
        .img {
          width: 40px;
          height: 40px;
        }
      }
      .middle {
        margin-left: 15px;
        flex: 1;
        h3 {
          font-size: 18px;
          color: #333333;
        }
        p {
          margin-top: 12px;
          font-size: 14px;
          color: #9d9d9d;
        }
      }
    }

    .message_list {
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #f4f4f4;
        .left {
          .img {
            width: 40px;
            height: 40px;
          }
        }
        .middle {
          margin-left: 15px;
          flex: 1;
          h3 {
            font-size: 17px;
          }
          p {
            margin-top: 10px;
            font-size: 12px;
            color: #9d9d9d;
          }
        }
        .right {
          font-size: 12px;
          color: #c9c9c9;
        }
      }
    }
  }
}
</style>